<template>
	<view class="content">
		<headerbox :cixitype="cixi"></headerbox>
		<view class="pages">
			<view class="card">
				<view class="card-body">
					<view class="asset_balance_box">
						<view class="top">总收益</view>
						<view class="is_myr_content">RMB {{zongshouyiNum||0.00}}</view>
					</view>
					<view class="d-flex">
						<view class="item" @click="getSelTime(2,1)">昨日</view>
						<view class="item" @click="getSelTime(3,1)">本周</view>
						<view class="item" @click="getSelTime(4,1)">本月</view>
						<view class="item" @click="getSelTime(5,1)">上月</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card-body">
					<view class="asset_balance_box">
						<view class="top">已缴保费</view>
						<view class="is_myr_content">RMB {{zongbaofeiNum||0.00}}</view>
					</view>
					<view class="d-flex">
						<view class="item" @click="getSelTime(2,2)">昨日</view>
						<view class="item" @click="getSelTime(3,2)">本周</view>
						<view class="item" @click="getSelTime(4,2)">本月</view>
						<view class="item" @click="getSelTime(5,2)">上月</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card-body">
					<view class="body-gradient-magenta">
						<view class="left_wallet">
							<view class="wallet_val">保险积分</view>
							<view class="wallet_value">RMB {{userinfo.fs_money||0}}</view>
						</view>
						<view class="right_wallet" @click="goSwichPageTow('/pages/menu/report_insurance_point',1)">
							<view>记录</view>
							<image src="../../static/timg/right.png" mode=""></image>
						</view>
					</view>
					<view class="list">
						<view class="items" @click="goSwichPage('/pages/user/recharge')">
							<image src="../../static/timg/qianbao.png" mode=""></image>
							<view>充值</view>
						</view>
						<view class="items">
							<image src="../../static/timg/qianbao.png" mode=""></image>
							<view>套餐</view>
						</view>
						<view class="items" @click="goSwichPage('/pages/user/claim')">
							<image src="../../static/timg/suopei.png" mode=""></image>
							<view>索赔</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card-body">
					<view class="body-gradient-magenta">
						<view class="left_wallet">
							<view class="wallet_val">MY积分</view>
							<view class="wallet_value">RMB {{userinfo.money||0}}</view>
						</view>
						<view class="right_wallet" @click="goSwichPageTow('/pages/menu/report_aig_point',0)">
							<view>记录</view>
							<image src="../../static/timg/right.png" mode=""></image>
						</view>
					</view>
					<view class="list">
						<view class="items" @click="goSwichPage('/pages/user/withdrawal_usdt')">
							<image src="../../static/timg/meiyuan.png" mode=""></image>
							<view>USDT提现</view>
						</view>
						<view class="items" @click="goSwichPage('/pages/user/convert')">
							<image src="../../static/timg/qianbao.png" mode=""></image>
							<view>兑换</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-bar" :class="cixi ? '':'footer-bar-detached'">
			<view class="fbitem" @click="goSwichPage('/pages/index/index')">
				<view class="image">
					<image src="../../static/timg/shouye.png" mode=""></image>
				</view>
				<view class="text">首页</view>
			</view>
			<view class="fbitem" @click="goSwichPage('/pages/contract/contract')">
				<view class="image">
					<image src="../../static/timg/heyue.png" mode=""></image>
				</view>
				<view class="text">合约</view>
			</view>
			<view class="fbitem" @click="goSwichPage('/pages/user/assets')">
				<view class="image">
					<image src="../../static/timg/zichan.png" mode=""></image>
				</view>
				<view class="text">资产</view>
			</view>
			<view class="fbitem" @click="goSwichPage('/pages/user/claim')">
				<view class="image">
					<image src="../../static/timg/suopei.png" mode=""></image>
				</view>
				<view class="text">索赔</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getuserinfo,
		zongshouyi,
		zongbaofei
	} from '../../api/api.js'
	import headerbox from '@/pages/header.vue'
	export default {
		components: {
			headerbox
		},
		data() {
			return {
				cixi: false,
				userinfo: [],
				startTimesfm: "00:00:00",
				endTimesfm: "23:59:59",
				// 今天
				todayStartTime: "",
				todayEndTime: "",
				// 昨天
				yestStartTime: "",
				yestEndTime: "",
				// 本周
				weekStartTime: "",
				weekEndTime: "",
				// 本月
				monthStartTime: "",
				monthEndTime: "",
				// 上月
				lastmonthStartTime: "",
				lastmonthEndTime: "",

				// 开始结束时间
				startTime: "",
				endTime: "",

				zongshouyiNum: "",
				zongbaofeiNum: "",
				timeType: 1
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 0) {
				this.cixi = true
			} else {
				this.cixi = false
			}
		},
		onLoad() {
			this.getuserinfo();
			this.dateFormat()
		},
		methods: {
			dateFormat() {
				// 拼接
				this.todayStartTime = this.getDateStr(null, 0);
				this.todayEndTime = this.getDateStr(null, 0);
				this.startTime = this.todayStartTime + ' ' + this.startTimesfm;
				this.endTime = this.todayEndTime + ' ' + this.endTimesfm;
				this.getzongshouyi()
				this.getzongbaofei()
			},
			getSelTime(timenum,type) {
				this.timeType = timenum;
				if (this.timeType == 1) { //当天
					this.startTime = this.todayStartTime + ' ' + this.startTimesfm;
					this.endTime = this.todayEndTime + ' ' + this.endTimesfm;
				} else if (this.timeType == 2) { //昨天
					this.yestStartTime = this.getDateStr(null, -1);
					this.yestEndTime = this.getDateStr(null, -1);
					this.startTime = this.yestStartTime + ' ' + this.startTimesfm;
					this.endTime = this.yestEndTime + ' ' + this.endTimesfm;
				} else if (this.timeType == 3) { // 本周
					this.weekStartTime = this.getWeek(0, 0);
					this.weekEndTime = this.getWeek(0, 1);
					this.startTime = this.weekStartTime + ' ' + this.startTimesfm;
					this.endTime = this.weekEndTime + ' ' + this.endTimesfm;
				} else if (this.timeType == 4) { // 本月
					this.monthStartTime = this.getMonth(0);
					this.monthEndTime = this.getMonth(1);
					this.startTime = this.monthStartTime + ' ' + this.startTimesfm;
					this.endTime = this.monthEndTime + ' ' + this.endTimesfm;
				} else if (this.timeType == 5) { // 上月
					this.lastmonthStartTime = this.getLastMonth(0);
					this.lastmonthEndTime = this.getLastMonth(1);
					this.startTime = this.lastmonthStartTime + ' ' + this.startTimesfm;
					this.endTime = this.lastmonthEndTime + ' ' + this.endTimesfm;
				}
				if(type==1){
					this.getzongshouyi()
				}else{
					this.getzongbaofei()
				}
			},
			// 当天，昨天
			getDateStr(today, addDayCount) {
				let date;
				if (today) {
					date = new Date(today);
				} else {
					date = new Date();
				}
				date.setDate(date.getDate() + parseFloat(addDayCount)); //获取AddDayCount天后的日期 
				let y = date.getFullYear();
				let m = date.getMonth() + 1; //获取当前月份的日期 
				let d = date.getDate();
				if (m < 10) {
					m = '0' + m;
				};
				if (d < 10) {
					d = '0' + d;
				};
				console.log(y + "-" + m + "-" + d)
				return y + "-" + m + "-" + d;
			},
			// 本周
			getWeek(n, type) { // 周
				let now = new Date()
				let day = now.getDay() //返回星期几的某一天;
				if (!type) {
					if (n == 1) {
						let dayNumber = day == 0 ? 0 : 7 - day
						now.setDate(now.getDate() + dayNumber + 1)
					} else if (n == -1) {
						let dayNumber = day == 0 ? 6 : day - 1
						now.setDate(now.getDate() - dayNumber - 7)
					} else {
						let dayNumber = day == 0 ? 6 : day - 1
						now.setDate(now.getDate() - dayNumber)
					}
				} else {
					if (n == 1) {
						let dayNumber = day == 0 ? 0 : 7 - day
						now.setDate(now.getDate() + dayNumber + 1 + 6) // 在周开始的日期上+6天=周结束
					} else if (n == -1) {
						let dayNumber = day == 0 ? 6 : day - 1
						now.setDate(now.getDate() - dayNumber - 7 + 6)
					} else {
						let dayNumber = day == 0 ? 0 : 7 - day
						now.setDate(now.getDate() + dayNumber)
					}
				}
				let date = now.getDate()
				let month = now.getMonth() + 1

				let s = now.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' +
					date :
					date)
				return s
			},
			// 本月
			getMonth(type) {
				let nowDate = new Date();
				let fullYear = nowDate.getFullYear();
				let month = nowDate.getMonth() + 1;
				let endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天
				let endDate = this.getFullDate(nowDate.setDate(endOfMonth)); //当月最后一天
				let startDate = this.getFullDate(nowDate.setDate(1)); //当月第一天
				if (type == 0) {
					return startDate
				} else {
					return endDate
				}
			},
			// 上月
			getLastMonth(type) {
				let nowDate = new Date();
				nowDate.setMonth(nowDate.getMonth() - 1);
				nowDate.setDate(1)
				let startDate = nowDate.getFullYear() + "-" + (nowDate.getMonth() + 1) + "-" + nowDate
					.getDate()
				let endDate = this.getFullDate(new Date(nowDate.getFullYear(), nowDate.getMonth() + 1, 0))
				if (type == 0) {
					return startDate
				} else {
					return endDate
				}
			},
			getFullDate(targetDate) {
				var D, y, m, d;
				if (targetDate) {
					D = new Date(targetDate);
					y = D.getFullYear();
					m = D.getMonth() + 1;
					d = D.getDate();
				} else {
					y = fullYear;
					m = month;
					d = date;
				}
				m = m > 9 ? m : '0' + m;
				d = d > 9 ? d : '0' + d;
				return y + '-' + m + '-' + d;
			},
			getzongshouyi() {
				let data = {
					start_date: this.startTime,
					end_date: this.endTime,
				}
				zongshouyi(data).then(res => {
					if (res.data.status.errorCode == 0) {
						this.zongshouyiNum = res.data.data.moneys;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getzongbaofei() {
				let data = {
					start_date: this.startTime,
					end_date: this.endTime,
				}
				zongbaofei(data).then(res => {
					if (res.data.status.errorCode == 0) {
						this.zongbaofeiNum = res.data.data.moneys;
					}
				}).catch(err => {
					console.log(err)
				})
			},

			getuserinfo() {
				getuserinfo().then(res => {
					if (res.data.status.errorCode == 0) {
						// uni.setStorageSync('userinfo', JSON.stringify(res.data.data.member))
						this.userinfo = res.data.data.member
					}
				}).catch(err => {
					console.log(err)
				})
			},
			goSwichPage(page) {
				uni.navigateTo({
					url: page
				})
			},
			goSwichPageTow(page,num) {
				uni.navigateTo({
					url: page + '?isBaoxianType='+num
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	.content {
		width: 100%;
		min-height: 100vh;
		background-color: #f1f1f7;
		color: #747474 !important;
	}

	.pages {
		padding-top: calc(calc(110rpx + 60rpx) + env(safe-area-inset-top));
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	}

	.card {
		width: 94%;
		margin: 0 auto;
		border-radius: 20rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		word-wrap: break-word;
		margin-bottom: 30rpx;
		background-color: #fff;
		box-shadow: rgba(0, 0, 0, .35) 0px 30px 60px -30px, rgba(0, 0, 0, .35) 0px -2px 6px 0px inset;
	}

	.card-body {
		z-index: 3;
		flex: 1 1 auto;
	}

	.asset_balance_box {
		text-align: center;
		padding: 48rpx 0;
	}

	.top {
		font-size: 28rpx;
		font-weight: normal;
		text-align: center;
		color: #a5a5a5;
		line-height: 40rpx;
	}

	.is_myr_content {
		font-size: 52rpx;
		font-weight: bold;
		line-height: 1.04;
		text-align: center;
		color: #2a2a2a;
		padding-top: 20rpx;
	}

	.d-flex {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 40rpx;
		margin-bottom: 60rpx;
	}

	.item {
		font-size: 22rpx;
		padding: 16rpx 26rpx;
		font-weight: 700;
		border-radius: 24rpx;
		box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.1);
		line-height: 1.5;
		background-image: linear-gradient(to bottom, #5D9CEC, #4A89DC) !important;
		color: #FFF !important;
	}

	.body-gradient-magenta {
		padding: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wallet_val {
		color: #656565;
		font-weight: bold;
		font-size: 28rpx;
		line-height: 48rpx;
	}

	.wallet_value {
		font-size: 32rpx;
		line-height: 44rpx;
		font-weight: bold;
		color: #c5993a;
	}

	.right_wallet {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		view {
			font-size: 22rpx;
			font-weight: normal;
			line-height: 48rpx;
			color: #a5a5a5;
		}

		image {
			width: 24rpx;
			height: 24rpx;
			margin-left: 12rpx;
		}
	}

	.list {
		padding: 40rpx;
		display: flex;
		justify-content: space-evenly !important;
		align-items: stretch !important;
	}

	.items {
		width: 160rpx;
		height: 160rpx;
		padding: 20rpx;
		border-radius: 50%;
		text-align: center;
		color: #818181;
		font-weight: bold;

		image {
			width: 28rpx;
			height: 28rpx;
			margin-top: 6rpx;
			margin-bottom: 4rpx;
		}

		view {
			line-height: 48rpx;
			font-size: 22rpx;
			font-weight: bold;
			text-align: center;
			color: #797979;
			display: block;
			padding-top: 12rpx;
		}
	}

	.footer-bar {
		background-color: rgba(255, 255, 255, 0.95);
		padding: 0px 20rpx;
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		z-index: 98;
		backdrop-filter: blur(20rpx);
		display: flex;
		text-align: center;
		transition: all 250ms ease;
		height: calc(120rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -10rpx 10rpx 0 rgba(0, 0, 0, 0.04);
	}

	.footer-bar.footer-bar-detached {
		border-radius: 40rpx;
		left: 20rpx !important;
		right: 20rpx !important;
		bottom: 30rpx !important;
		box-shadow: 0 0px 30rpx 0 rgba(0, 0, 0, 0.1) !important;
		height: 120rpx !important;
	}

	.fbitem {
		color: #818181;
		position: relative;
		flex: 1 1 auto;
		padding-top: 24rpx;

		.image {
			height: 48rpx;
			margin-top: -4rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.text {
			height: 48rpx;
			margin-top: -6rpx;
			font-size: 24rpx;
			opacity: 0.7;
			color: #818181;
		}
	}
</style>